import "../../../assets/sass/home_page/free_templates/featured_picks/today_recommend/today_recommend.css";
import BoxcTypeOne from "./TodayRecommend/BoxcTypeOne";
import BoxcTypeTow from "./TodayRecommend/BoxcTypeTow";
import BoxcTypeThree from "./TodayRecommend/BoxcTypeThree";
import BoxcTypeFour from "./TodayRecommend/BoxcTypeFour";
import BoxcTypeFive from "./TodayRecommend/BoxcTypeFive";
import { ArrowRightOutlined, CloseOutlined } from "@ant-design/icons";
import { Button } from "antd";
import H5 from "/src/assets/image/home_page/work_bench/H5.svg";
import Form from "/src/assets/image/home_page/work_bench/form.svg";
import longPage from "/src/assets/image/home_page/work_bench/long_page.svg";
import interaction from "/src/assets/image/home_page/work_bench/interaction.svg";
import posters from "/src/assets/image/home_page/work_bench/posters.svg";
import E_book from "/src/assets/image/home_page/work_bench/E-book.svg";
import video from "/src/assets/image/home_page/work_bench/video.svg";
import Ai from "/src/assets/image/home_page/work_bench/Ai.svg";
import { useState } from "react";

const TodayRecommend = () => {
  const tabList = [
    "精选推荐",
    "热点关注",
    "儿童节",
    "高考加油",
    "端午节",
    "618",
    "父亲节",
  ];

  const createOpusItems = [
    {
      icon: H5,
      title: "H5",
      info: "霉基础快速制作翻页H5",
    },
    {
      icon: Form,
      title: "表单",
      info: "投票/报名/考试/问卷/收款/预约等",
    },
    {
      icon: longPage,
      title: "长页",
      info: "一页到底图文单页制作工具",
    },
    {
      icon: interaction,
      title: "互动",
      info: "专业制作互动类H5页面利器",
    },
    {
      icon: posters,
      title: "海报",
      info: "在线作图神器",
    },
    {
      icon: E_book,
      title: "电子画册",
      info: "3D翻页电子画册制作",
    },
    {
      icon: video,
      title: "视频",
      info: "在线简易视频编辑和制作",
    },
    {
      icon: Ai,
      title: "AI创作",
      info: "智能生成文案/绘画/H5/长页",
    },
  ];

  const createToolItems = [
    {
      title: "短信通知",
      info: "表单数据智能触发短信",
    },
    {
      title: "活动工具",
      info: "三分钟打通全链路",
    },
    {
      title: "格式转化器",
      info: "作品格式一键快捷转换",
    },
    {
      title: "获客活码",
      info: "获客锁客，一码搞定",
    },
    {
      title: "智能抠图",
      info: "AI一键快捷扣除图像",
    },
  ];

  const hotScenarioItem = [
    {
      title: "邀请函",
      bgColor: "#FFEDEC",
    },
    {
      title: "端午节",
      bgColor: "#E7EFFF",
    },
    {
      title: "同学会",
      bgColor: "#FEEFD0",
    },
    {
      title: "端午节放假通知",
      bgColor: "#EDF9E8",
    },
    {
      title: "团购报名",
      bgColor: "#FFEDEC",
    },
    {
      title: "数字人",
      bgColor: "#E7EFFF",
    },
    {
      title: "满月邀请函",
      bgColor: "#FEEFD0",
    },
    {
      title: "招租",
      bgColor: "#EDF9E8",
    },
  ];

  const [createTemplatePopusShow, setCreateTemplatePopusShow] = useState(false);
  const [showbtnIndex, setShowBtnIndex] = useState(null);

  const opusItemEnter = (index: number) => {
    console.log(index);
    setShowBtnIndex(index);
  };
  const opusItemLeave = () => {
    setShowBtnIndex(null);
    const doms = document.querySelectorAll(".tool_item");
    doms.forEach((item) => {
      item.classList.add("tool_item_leave");
    });
  };

  const create = () => {
    setCreateTemplatePopusShow(true);
  };
  const close = () => {
    setCreateTemplatePopusShow(false);
  };

  const createToolLeave = () => {
    const doms = document.querySelectorAll(".opus_item");
    doms.forEach((item) => {
      item.classList.add("opus_item_leave");
    });
  };
  const hotScenarioLeave = () => {
    const doms = document.querySelectorAll(".hot_item");
    doms.forEach((item) => {
      item.classList.add("hot_item_leave");
    });
  };

  const createLeave = () => {
    const dom = document.querySelector(".create");
    dom.classList.add("create_leave");
  };

  const newTemplate = () => {
    window.open("/createtemplate");
  };
  return (
    <div className="today_recommend">
      {createTemplatePopusShow && (
        <div className="create_template_popus">
          <div className="create_template_boxc">
            <div className="create_opus">
              <div className="create_opus_title">创建作品</div>
              <div className="create_opus_box">
                {createOpusItems &&
                  createOpusItems.map((item, index) => {
                    return (
                      <div
                        className="opus_item"
                        key={index}
                        onMouseEnter={() => opusItemEnter(index)}
                        onMouseLeave={opusItemLeave}
                      >
                        <div className="opus_item_img">
                          <img src={item.icon} />
                        </div>
                        <div className="opus_item_title">{item.title}</div>
                        <div className="opus_item_info">{item.info}</div>
                        {showbtnIndex === index && (
                          <div className="btn_box">
                            <Button className="btn" onClick={newTemplate}>
                              空白创建
                            </Button>
                            {index !== 3 && index !== 7 && (
                              <Button className="btn" type="primary">
                                模板创建
                              </Button>
                            )}
                          </div>
                        )}
                      </div>
                    );
                  })}
              </div>
            </div>
            <div className="create_tool">
              <div className="create_tool_title">
                <div className="title">创意工具</div>
                <div className="see_more">查看更多&nbsp;&gt;</div>
              </div>
              <div className="create_tool_box">
                {createToolItems &&
                  createToolItems.map((item, index) => {
                    return (
                      <div
                        key={index}
                        className="tool_item"
                        onMouseLeave={createToolLeave}
                      >
                        <div className="title">{item.title}</div>
                        <div className="info">{item.info}</div>
                      </div>
                    );
                  })}
              </div>
            </div>
            <div className="hot_scenario">
              <div className="hot_scenario_title">热门场景</div>
              <div className="hot_scenario_box">
                {hotScenarioItem &&
                  hotScenarioItem.map((item, index) => {
                    return (
                      <div
                        className="hot_item"
                        key={index}
                        style={{ backgroundColor: item.bgColor }}
                        onMouseLeave={hotScenarioLeave}
                      >
                        {item.title}
                      </div>
                    );
                  })}
              </div>
            </div>
            <div className="close" onClick={close}>
              <CloseOutlined />
            </div>
          </div>
        </div>
      )}
      <div className="today_recommend_top">
        <div className="recommend_top_title">
          <span className="title">今日推荐</span>
          <span className="title_text">开通会员免费用</span>
        </div>
        <div className="recommend_top_tab">
          <div className="tab">
            {tabList &&
              tabList.map((item, index) => {
                return (
                  <div className="tab_item" key={index}>
                    {item}
                  </div>
                );
              })}
          </div>
          <span className="look_more">查看更多&gt;</span>
        </div>
      </div>
      <div className="today_recommend_main">
        <div className="main_left">
          <div className="create" onClick={create} onMouseLeave={createLeave}>
            <div className="new_create">+</div>
            <div className="create_text">空白创建</div>
          </div>
          <div className="calendar">
            <img src="/src/assets/image/home_page/main/box_type_one/Calendar.jpg" />
          </div>
        </div>
        <div className="main_right">
          <div className="right_box">
            <BoxcTypeOne></BoxcTypeOne>
            <BoxcTypeTow></BoxcTypeTow>
            <BoxcTypeThree></BoxcTypeThree>
            <BoxcTypeFour></BoxcTypeFour>
            <BoxcTypeFive></BoxcTypeFive>
            <BoxcTypeOne></BoxcTypeOne>
            <BoxcTypeTow></BoxcTypeTow>
            <BoxcTypeThree></BoxcTypeThree>
            <BoxcTypeFour></BoxcTypeFour>
            <BoxcTypeFive></BoxcTypeFive>
            <BoxcTypeOne></BoxcTypeOne>
            <BoxcTypeTow></BoxcTypeTow>
            <div className="look_more">
              <div className="look_box">
                <div className="arrow">
                  <ArrowRightOutlined />
                </div>
                <div className="look_text">查看更多</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TodayRecommend;
